<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Class与Style绑定</title>
	<link rel="icon" href="../logo.png">
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>
	<style>
		.active{
			width: 100px;
			height: 100px;
			border:1px solid red;
		}
		.text-center{
			text-align: center;
		}
		.bold{
			font-weight: bolder;
		}
	</style>
</head>
<body>
	<p class="title">1.绑定HTML Class</p>
	<div class="subtitle">1.1对象语法</div>
	<div id="app">
		<div v-bind:class="{active :isActive,'text-center':hasError}">123</div>
	</div>

	<script>
		var app= new Vue({
			el:'#app',
			data:{
				isActive:true,
				hasError:true,
			}
		})
	</script>
	<p>绑定一个对象到class</p>
	<div id="app1">
		<div v-bind:class="classObject">123</div>
	</div>

	<script>
		var app1= new Vue({
			el:'#app1',
			data:{
				classObject:{
					active:true,
					'text-center':true,
				}
			}
		})
	</script>

	<p>绑定一个对象到class 利用计算属性</p>
	<div id="app2">
		<div v-bind:class="classObject">123</div>
	</div>
	<script>
		var app2= new Vue({
			el:'#app2',
			data:{
				isActive:true,
				textCenter:true,
			},
			computed:{
				classObject:function () {
					return {
						active: this.isActive,
						// active: this.isActive && !this.textCenter,
						'text-center': this.textCenter,
						'text-center': this.textCenter && this.textCenter.type === 'fatal',
					}
				}
			}
		})
	</script>


	<div class="subtitle">1.2数组语法</div>
	<div id="app3">
		<div v-bind:class="[activeClass,errorClass]">123</div>
	</div>
	<script>
		var app3=new Vue({
			el:'#app3',
			data:{
				activeClass:'active',
				errorClass:'text-center',
			}
		})
	</script>

	<div class="subtitle">1.3用在组件上</div>

	<div id="app4">
		<!-- <my-component class="bold" v-for="item in itemList" v-bind:todo="item"> -->
		<my-component class="bold" v-bind:num2="num">
		</my-component>
	</div>

	<script>
		Vue.component('my-component',{
			// props:['todo'],
			props:['num2'],
			template:'<div><p class="foo bar">Hi</p><span> {{num2}} </span></div>'
		})

		var app4 = new Vue({
			el:'#app4',
			data:{
				num:'1'
				// itemList:
				// [
				// 	{text:'Learning Javascript'},
				// 	{text:'Learning Vue'},
				// 	{text:'Build something awesome'},
				// ]
			}
		})
	</script>

	<p class="title">绑定内联样式</p>

	<p class="subtitle">对象语法</p>
	<div id="app5">
		<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">123</div>
	</div>
	<script>
		var app5=new Vue({
			el:'#app5',
			data:{
				activeColor:'red',
				fontSize:30
			}
		})
	</script>
	
	<p>封装到对象上面</p>
	<div id="app6">
		<div v-bind:style="styleObject">123</div>
	</div>
	<script>
		var app6 = new Vue({
			el:'#app6',
			data:{
				styleObject:{
					color:'red',
					fontSize:'13px'
				}
			}
		})
	</script>

	<p>数组语法</p>
	<div id="app7">
		<div v-bind:style="[baseStyles,overRidingStyles]">123</div>
	</div>

	<script>
		var app7=new Vue({
			el:'#app7',
			data:{
				baseStyles:{
					color:'red',
					backgroundColor:'green',
					transform:'rotate(45deg)'
				},
				overRidingStyles:{
					fontSize:'13px'
				}
			}
		})
	</script>
</body>
</html>